<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{site['name']}} - 忘记密码</title>
  {% include _/base_head.html %}
  <link href="{{static_url('css/psw.css')}}" rel="stylesheet"/>
  <style>
    .input-group-addon { min-width: 6em; }
    .actions > * + * { margin-left: 6px; }
    .w400 { max-width: 450px; }
  </style>
</head>

<body>
<div class="app">
  {% module TopNav() %}
  <div class="m-t-20 w400">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title center">忘记密码</h3>
      </div>
      <div class="panel-body">
        <form onsubmit="onSubmit();return false;">
          <div class="input-group">
            <span class="input-group-addon">用户名</span>
            <input type="text" id="username" autofocus class="form-control" required>
          </div>
          <div class="input-group">
            <span class="input-group-addon">备　忘</span>
            <input type="text" id="verification" class="form-control" required
                   placeholder="输入注册时留的备忘文本">
          </div>
          <div class="input-group">
            <span class="input-group-addon">新密码</span>
            <input type="password" id="password" class="form-control" required autocomplete="off" maxlength="20"
                   pattern="[A-Za-z0-9~!@#$%_;,.]{4,}" onkeydown="onPswChanged(this)"
                   placeholder="4~20个字母、数字或特殊符号，至少两种"
                   oninvalid="setCustomValidity('4~20个大写字母、小写字母、数字或特殊符号\n至少两种，可含符号 ~!@#$%_;,.')">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" onclick="togglePassword()">显</button>
            </span>
          </div>
          <div class="input-group pwd-grade no-select">
            <span class="input-group-addon"></span>
            <span class="form-control">
              <span id="p-ok"></span><span id="p-len" title="4~20个字符">0 字符</span><span
                id="p-upper">大写</span><span id="p-lower">小写</span><span
                id="p-digit">数字</span><span id="p-sign" title="可含符号 ~!@#$%_;,.">符号</span>
            </span>
          </div>
          <div class="input-group">
            <span class="input-group-addon">确认密码</span>
            <input type="password" id="password2" class="form-control"
                   required placeholder="再次输入密码" autocomplete="off">
          </div>
          <div class="actions m-t-10 center">
            <input type="submit" class="btn btn-primary" value="重设密码"/>
            <a href="/" class="btn btn-default">回到首页</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% include _/base_foot.html %}
<script src="{{static_url('js/psw.js')}}"></script>
<script>
  function onSubmit() {
    const data = {
      username: $('#username').val(),
      verification: $('#verification').val(),
      password: $('#password').val(),
    }
    if ($('#password2').val() !== data.password) {
      return showError('错误', '两次输入的密码不一致')
    }
    postApi('/user/forgot', {data: data}, function (res) {
      showSuccess('操作成功', '密码已重新设置', () => window.location = '/user/login')
    })
  }
  function togglePassword(sel='#password') {
    $(sel).attr('type', $(sel).attr('type') === 'text' ? 'password' : 'text')
  }
</script>
</body>
</html>